<!--首页正文-->
<template lang="pug">
  el-row
    el-col.data-statistics(:span="16", v-bind:class="{active: isZoom}")
      .grid-content
        .info
          .info-1 今日实时数据
          .info-2
            .info-2-1 领取门店数量
            .info-2-2 1105
          .info-2
            .info-2-1 商品扫码次数
            .info-2-2 1105
          .info-2
            .info-2-1 红包领取个数
            .info-2-2 1105
        .button-big
          i.iconfont.icon-fangda-(v-if="!isZoom", v-on:click="zoomData")
          i.iconfont.icon-suoxiao(v-if="isZoom", v-on:click="zoomData")
        #showMapsData
    el-col.data-right(:span="8")
      .grid-content
        .data
          .data-1
            .data-title 领取记录
            ul
              li
                .content.clearfix
                  .name 鑫辉农资店领取
                    span  6.66元
                  .time 1分钟前
                .addres 山东省潍坊市高密县人民路88号
              li
                .content.clearfix
                  .name 鑫辉农资店领取
                    span  6.66元
                  .time 1分钟前
                .addres 山东省潍坊市高密县人民路88号
              li
                .content.clearfix
                  .name 鑫辉农资店领取
                    span  6.66元
                  .time 1分钟前
                .addres 山东省潍坊市高密县人民路88号
              li
                .content.clearfix
                  .name 鑫辉农资店领取
                    span  6.66元
                  .time 1分钟前
                .addres 山东省潍坊市高密县人民路88号
              li
                .content.clearfix
                  .name 鑫辉农资店领取
                    span  6.66元
                  .time 1分钟前
                .addres 山东省潍坊市高密县人民路88号
          .data-2
            .data-title.clearfix
              .content
                span.rank 领取排名
                span.time 2018-08-02至2018-08-31
              .select
                el-radio-group(v-model="selectCity")
                  el-radio-button(label="省")
                  el-radio-button(label="市")
            el-table(:data="tableData", style="width: 100%", height="350", :default-sort="{prop: 'storeNum', order: 'descending'}")
              el-table-column(prop="rank", label="排名", width="50")
              el-table-column(prop="address", label="地区")
              el-table-column(prop="storeNum", label="参与门店总数", sortable="", :formatter="formatter")
              el-table-column(prop="scanProductNum", label="商品扫码次数", sortable="")

</template>

<script>
  import {loadScripts} from '~/plugins/load-js-file'

  export default {
    head: {
      script: [
        { src: '//api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM' }
      ]
    },
    // async asyncData (context) {
    //   const [ detailInfo ] = await Promise.all([
    //     context.app.$axios.$post(`/ProjectByMrnumH5?mrnum=${context.params.id}`)
    //   ]);
    //   return {
    //     detailInfo
    //   }
    // },
    data() {
      return {
        tableData: [
          {
          rank: '1',
          address: '江苏',
          storeNum: '745',
          scanProductNum: '244'
        }, {
          rank: '2',
          address: '浙江',
          storeNum: '645',
          scanProductNum: '241'
        }, {
          rank: '3',
          address: '上海',
          storeNum: '545',
          scanProductNum: '235'
        }, {
          rank: '4',
          address: '北京',
          storeNum: '345',
          scanProductNum: '145'
        }, {
          rank: '4',
          address: '北京',
          storeNum: '345',
          scanProductNum: '145'
        }, {
          rank: '4',
          address: '北京',
          storeNum: '345',
          scanProductNum: '145'
        }, {
          rank: '4',
          address: '北京',
          storeNum: '345',
          scanProductNum: '145'
        }, {
          rank: '4',
          address: '北京',
          storeNum: '345',
          scanProductNum: '145'
        }
        ],
        selectCity: '省',
        isZoom: false
      }
    },
    mounted: function () {
      const self = this;
      this.initChartChina(self);

      const orderHeight = document.documentElement.clientHeight - 80;
      document.querySelector('.el-main').style.height = orderHeight + 'px';
      document.querySelector('.el-main').style.background = '#1c1d1f';
    },
    methods: {
      zoomData: function() {
        const self = this;
        self.isZoom = !self.isZoom;
        self.isZoom ? self.initChartChina(self,true) : self.initChartChina(self,false);
      },
      initChartChina: function (self,isBig) {
        // 将地图展示高度
        const isActive = document.querySelector('.data-statistics').classList.contains('active');
        const orderHeight = document.documentElement.clientHeight;

        if( isBig ) {
          document.querySelector('#showMapsData').style.height = orderHeight + 'px';
        } else {
          document.querySelector('#showMapsData').style.height = (orderHeight - 150) + 'px';
        }

        loadScripts([
          "//cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"
        ]).then(function () {
          return loadScripts([
            "//cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js",
            "//cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js",
            "//cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js",
            "//cdn.jsdelivr.net/npm/echarts/map/js/china.min.js",
          ]);
        }).then(function () {
          let myChart = echarts.init(document.getElementById('showMapsData'));
          myChart.showLoading();
          self.$axios.get('http://192.168.123.84:3000/weibo.json').then(response => {
            if (response.status >= 200 && response.status < 300) {
              let weiboData = response.data;
              weiboData = weiboData.map(function (serieData, idx) {
                let px = serieData[0] / 1000;
                let py = serieData[1] / 1000;
                let res = [[px, py]];

                for (let i = 2; i < serieData.length; i += 2) {
                  let dx = serieData[i] / 1000;
                  let dy = serieData[i + 1] / 1000;
                  let x = px + dx;
                  let y = py + dy;
                  res.push([x.toFixed(2), y.toFixed(2), 1]);

                  px = x;
                  py = y;
                }
                return res;
              });
              let option = {
                tooltip: {},
                legend: {
                  bottom: 'bottom',
                  data: ['强', '中', '弱'],
                  textStyle: {
                    color: '#ccc'
                  }
                },
                geo: {
                  map: 'china',
                  roam: true,
                  label: {
                    emphasis: {
                      show: false
                    }
                  },
                  itemStyle: {
                    normal: {
                      areaColor: '#0b0f14',
                      borderColor: '#fff'
                    },
                    emphasis: {
                      areaColor: '#2a333d'
                    }
                  }
                },
                series: [
                  {
                    name: '弱',
                    type: 'scatterGL',
                    coordinateSystem: 'geo',
                    symbolSize: 1,
                    itemStyle: {
                      shadowBlur: 2,
                      shadowColor: 'rgba(37, 140, 249, 0.8)',
                      color: 'rgba(37, 140, 249, 0.8)'
                    },
                    data: weiboData[0]
                  }, {
                    name: '中',
                    type: 'scatterGL',
                    coordinateSystem: 'geo',
                    symbolSize: 1,
                    itemStyle: {
                      shadowBlur: 2,
                      shadowColor: 'rgba(14, 241, 242, 0.8)',
                      color: 'rgba(14, 241, 242, 0.8)'
                    },
                    data: weiboData[1]
                  }, {
                    name: '强',
                    type: 'scatterGL',
                    coordinateSystem: 'geo',
                    symbolSize: 1,
                    itemStyle: {
                      shadowBlur: 2,
                      shadowColor: 'rgba(255, 255, 255, 0.8)',
                      color: 'rgba(255, 255, 255, 0.8)'
                    },
                    data: weiboData[2]
                  }]
              };

              setTimeout(function () {
                myChart.setOption(option);
                myChart.hideLoading();
              },1000)
            }
          });
        });
      },
      formatter(row, column) {
        return row.address;
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-main {
    .data-statistics {
      position: relative;
      .info {
        position: absolute;
        left: 30px;
        top: 30px;
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        z-index: 1;
        .info-1 {
          align-self: center;
          text-align: center;
          color: #fff;
          margin-right: 15px;
          font-size: 20px;
        }
        .info-2 {
          align-self: center;
          text-align: center;
          margin: 0 15px;
          .info-2-1 {
            color: #e5c42a;
            font-size: 20px;
          }
          .info-2-2 {
            color: #e5c42a;
            font-size: 30px;
            font-weight: 600;
          }
        }
      }
      .button-big {
        position: absolute;
        top: 0;
        right: 10px;
        z-index: 1;
        width: 40px;
        height: 40px;
        .icon-fangda-,
        .icon-suoxiao {
          font-size: 40px;
          background-color: #3c3f43;
          color: #fff;
          cursor: pointer;
          &:hover {
            background-color: #fff;
            color: #3c3f43;
          }
        }
      }
    }
    .data-statistics.active {
      width: 100%;
      height: 100%;
      top: 0;
      position: fixed;
      right: 0;
      z-index: 9999;
    }
    .data-right {
      padding: 10px;
      .data {
        .data-1 {
          .data-title {
            background-color: #131313;
            color: #fff;
            font-weight: bold;
            font-size: 18px;
            padding: 20px 20px;
          }
          ul {
            list-style: none;
            padding: 0;
            margin: 0;
            border-right: 1px solid #131313;
            border-left: 1px solid #131313;
            border-bottom: 1px solid #131313;
            li {
              padding: 10px 20px;
              border-bottom: 1px solid #131313;
              color: #fff;
              font-size: 14px;
              &:last-child {
                border-bottom: none;
              }
              .content {
                .name {
                  float: left;
                  span {
                    margin-left: 5px;
                    color: #2a98e5;
                  }
                }
                .time {
                  float: right;
                  color: #666;
                  font-size: 12px;
                }
              }
              .addres {
                color: #666;
                font-size: 12px;
              }
            }
          }
        }
        .data-2 {
          border: 1px solid #131313;
          margin-top: 20px;
          background-color: #131313;
          .data-title {
            border-bottom: 1px solid #131313;
            .content {
              padding: 5px 10px 0 0;
              float: left;
              .rank {
                background-color: #131313;
                color: #2a98e5;
                font-weight: bold;
                font-size: 18px;
                margin-right: 20px;
                padding: 5px 10px;
                border-bottom: 2px solid #2a98e5;
              }
              .time {
                font-size: 12px;
                color: #666;
              }
            }
            .select {
              float: right;
              padding: 5px 10px 0 0;
            }
          }
          .el-table {
            padding: 0 10px;
            background: #131313;
          }
        }
      }
    }
    #showMapsData {
      width: 100%;
      height: 400px;
      background-color: #0b0f14;
      padding: 20px;
    }
  }
</style>
